<!DOCTYPE html>
<!--<html lang="en" xmlns:th="http://www.thymeleaf.org">-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据查询</title>
    <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <!-- 这里使用了element ui框架 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入http-vue-loader -->
    <script src="https://unpkg.com/http-vue-loader"></script>
    <style type="text/css">
        data_center {
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <el-row style="margin-top: 10px;">
        <el-upload
                action="#"
                :multiple="false"
                :limit="1"
                :on-change="handleChange1"
                :file-list="fileList1"
                :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取style文件</el-button>
        </el-upload>
    </el-row>
    <el-row style="margin-top: 10px;">
        <el-upload
                action="#"
                :multiple="false"
                :limit="1"
                :on-change="handleChange2"
                :file-list="fileList2"
                :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取GeoTif文件</el-button>
        </el-upload>
    </el-row>
    <el-row style="margin-top: 10px;">
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
    </el-row>
</div>
</body>

<script>
    Vue.use(httpVueLoader)
    new Vue({
        el: '#app',
        data() {
            return {
                fileList1: [],
                fileList2: [],
            };
        },
        created() {

        },

        methods: {
            //通过onchanne触发方法获得文件列表
            handleChange1(file, fileList) {
                this.fileList1 = fileList;
            },
            handleChange2(file, fileList) {
                this.fileList2 = fileList;
            },
            submitUpload() {
                let fd = new FormData();
                if (this.fileList1.length == 0){
                    this.$message.error("请选择文件！");
                }else {
                    this.fileList1.forEach(item=>{
                        //文件信息中raw才是真的文件
                        fd.append("styleFile",item.raw);
                        //console.log(item.raw)
                    })
                    this.fileList2.forEach(item=>{
                        //文件信息中raw才是真的文件
                        fd.append("tifFile",item.raw);
                        //console.log(item.raw)
                    })
                    axios({
                        method: 'post',
                        url: '/test.upload/upload',
                        headers: { "Content-Type": "multipart/form-data" },
                        timeout: 30000,
                        data: fd
                    }).then(res=>{
                        if (res.status == 200) {
                            if(res.data.code == 200){
                                this.$message({
                                    message: '上传成功!'+res.data.data,
                                    type: 'success'
                                });
                                this.fileUpList1 = []
                                this.fileUpList2 = []
                            }else{
                                this.$message.error(res.data.message);
                            }
                        } else {
                            this.$message.error("请求服务异常！");
                        }
                    })
                }
            }
        }
    })
</script>
</html>